<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
    <style type="text/css">
        .ctolo{color: #007DDB;}
        .active{
            border:3px solid yellow!important;
            width: 47px;
            height: 57px;
        }
        .layui-table-cell{
            height:60px;
            line-height: 36px;
        }
    </style>
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote quoteBox">
    <div class="demoTable">
        <div class="layui-form">
            <input id="roomName" type="hidden">
        </div>
    </div>
</blockquote>

<div class="layui-row">

    <input type="hidden" id="state">

    <table id="demo" lay-filter="test"></table>
    <div class="layui-form" >
        <table id="brands" class="layui-table containers">
        </table>
    </div>
    <script type="text/html" id="barDemo">
        <img data-id="-1" class="choic " onclick='test(this)' src= '../../images/bian.png' width='41px' height='51px'>
    </script>
    <script type="text/html" id="createTime">
        {{ timestampToTime(d.createTime) }}
    </script>
</div>
<div id="cards"></div>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="usercards.js"></script>
<script src="../../js/cache.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    //需要更换的牌
    function onkey(indexs,id) {
        var index = $(".active").attr("data-id");
        if(index!=-1){
            var html = $("#cards").html();
            html += "<img id='"+index+"' onclick=onkey('"+index+"') src='"+baseUrl+"img/"+index+".png' width='40px' height='50px' />"
            $("#cards").html(html);
        }
        $(".active").attr("src",baseUrl+"img/"+indexs+".png")
        $(".active").attr("data-id",indexs)
        if(lock){
            $("#"+indexs).remove()
        }
        var roomName = $("#roomName").val();
        $.ajax({
            type: "POST", //提交方式
            url: baseUrl+'change/changecard?roomName='+roomName,
            dataType: 'json',
            data: {
                userid: id //页码的参数名称，默认：page
                ,oldCard:index
                ,newCard:indexs
            },
            success: function(data){
                if (JSON.stringify(data.meta.code) == 200){
                    // layui.msg("改牌成功");
                    layer.alert('改牌成功', {
                        icon: 1,
                        title: "提示"
                    });
                }else{
                    layer.alert('改牌失败', {
                        icon: 5,
                        title: "提示"
                    });
                }
            }
        })
    }

    var lock=false;
    function test (el) {
        lock=true
        $(".choic").removeClass("active")
        $(el).addClass("active")
    }
</script>
</body>
</html>